<template>
  <div class="fixed-footer">
    <div class="head text-center text-white pb-4">
      <div class="py-3 relative">
        <i class="iconfont icon-arrow-left font-bold font-xxxl absolute-middle px-3 l-0" @click="back"></i>
        <b v-text="m.leagueShort"></b>
      </div>
      <div class="d-flex justify-content-between px-5">
        <div>
          <img class="img-xl" :src="m.hostPic">
          <div class="font-lg" v-text="m.hostShort"></div>
          <div class="font-sm">[{{m.leagueShort}} {{m.hostRank}}]</div>
        </div>
        <div>
          <b class="font-xxxl" :class="m.status == 1 ? 'text-green' : ''" style="line-height: 4.5rem" v-text="m.bf"></b>
          <div :class="m.status == 1 ? 'text-green' : ''" v-text="m.text"></div>
          <div class="font-sm" v-text="m.matchTime"></div>
        </div>
        <div>
          <img class="img-xl" :src="m.guestPic">
          <div class="font-lg" v-text="m.guestShort"></div>
          <div class="font-sm">[{{m.leagueShort}} {{m.guestRank}}]</div>
        </div>
      </div>
    </div>

    <div class="bl-b pl-3 ml-4 mt-3 mb-2 lh-13">联赛积分</div>
    <div class="bg-white py-2 pb-3">
      <table class="table-padded">
        <thead class="text-left bb-l">
        <tr class="text-grey">
          <th class="pl-4">球队</th>
          <th>联赛</th>
          <th>已赛</th>
          <th>胜平负</th>
          <th class="text-center">积分</th>
          <th class="text-center">排名</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td class="pl-4" v-text="m.hostShort"></td>
          <td v-text="m.leagueShort"></td>
          <td v-text="sum(m.hostData)"></td>
          <td v-text="tail(m.hostData)"></td>
          <td class="text-center" v-text="m.hostData.total ? m.hostData.total.score : '-'"></td>
          <td class="text-center" v-text="m.hostRank"></td>
        </tr>
        <tr>
          <td class="pl-4" v-text="m.guestShort"></td>
          <td v-text="m.leagueShort"></td>
          <td v-text="sum(m.guestData)"></td>
          <td v-text="tail(m.guestData)"></td>
          <td class="text-center" v-text="m.guestData.total ? m.guestData.total.score : '-'"></td>
          <td class="text-center" v-text="m.guestRank"></td>
        </tr>
        </tbody>
      </table>
    </div>

    <div class="bl-b pl-3 ml-4 mt-3 mb-2 lh-13">历史交锋</div>
    <div class="bg-white py-2 pb-3">
      <div class="px-4 py-2">近{{m.engageData.matches}}次交战 {{m.hostShort}}
        <b class="text-red">{{m.engageData.win}}胜</b>
        <b class="text-green">{{m.engageData.even}}平</b>
        <b class="text-blue">{{m.engageData.lose}}负</b>
      </div>
      <table class="table-padded">
        <thead class="bb-l">
        <tr class="text-grey text-left">
          <th class="pl-4">联赛</th>
          <th class="text-right">主队</th>
          <th class="text-center">比分(半场)</th>
          <th>客队</th>
          <th class="text-center">赛果</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="e in m.engageList">
          <td class="text-grey font-xs lh-15 pl-4">
            <div v-text="e.league"></div>
            <div v-text="e.matchDate"></div>
          </td>
          <td class="text-right" :class="color(e, 1)" v-text="e.host"></td>
          <td class="text-center">{{e.goals}} <b class="text-grey">({{e.halfGoals}})</b></td>
          <td :class="color(e)" v-text="e.guest"></td>
          <td class="text-center"><b v-text="texts[e.result]" class="rad-3 badge" :class="bgs[e.result]"></b></td>
        </tr>
        </tbody>
      </table>
    </div>

    <div class="bl-b pl-3 ml-4 mt-3 mb-2 lh-13">近期战绩</div>
    <div class="bg-white py-2 pb-3">
      <div class="px-4 py-2">近{{m.hostData.recent.matches}}场赛事 {{m.hostShort}}
        <b class="text-red">{{m.hostData.recent.win}}胜</b>
        <b class="text-green">{{m.hostData.recent.even}}平</b>
        <b class="text-blue">{{m.hostData.recent.lose}}负</b>
      </div>
      <table class="table-padded">
        <thead class="text-left bb-l">
        <tr class="text-grey">
          <th class="pl-4">联赛</th>
          <th class="text-right">主队</th>
          <th class="text-center">比分(半场)</th>
          <th>客队</th>
          <th class="text-center">赛果</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="e in m.hostHistoryList">
          <td class="text-grey font-xs lh-15 pl-4">
            <div v-text="e.league"></div>
            <div v-text="e.matchDate"></div>
          </td>
          <td class="text-right" :class="color(e, 1)" v-text="e.host"></td>
          <td class="text-center">{{e.goals}} <b class="text-grey">({{e.halfGoals}})</b></td>
          <td :class="color(e)" v-text="e.guest"></td>
          <td class="text-center"><b v-text="texts[e.result]" class="rad-3 badge" :class="bgs[e.result]"></b></td>
        </tr>
        </tbody>
      </table>

      <div class="px-4 py-2 mt-3">近{{m.guestData.recent.matches}}场赛事 {{m.guestShort}}
        <b class="text-red">{{m.guestData.recent.win}}胜</b>
        <b class="text-green">{{m.guestData.recent.even}}平</b>
        <b class="text-blue">{{m.guestData.recent.lose}}负</b>
      </div>
      <table class="table-padded">
        <thead class="text-left bb-l">
        <tr class="text-grey">
          <th class="pl-4">联赛</th>
          <th class="text-right">主队</th>
          <th class="text-center">比分(半场)</th>
          <th>客队</th>
          <th class="text-center">赛果</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="e in m.guestHistoryList">
          <td class="text-grey font-xs lh-15 pl-4">
            <div v-text="e.league"></div>
            <div v-text="e.matchDate"></div>
          </td>
          <td class="text-right" :class="color(e, 1)" v-text="e.host"></td>
          <td class="text-center">{{e.goals}} <b class="text-grey">({{e.halfGoals}})</b></td>
          <td :class="color(e)" v-text="e.guest"></td>
          <td class="text-center"><b v-text="texts[e.result]" class="rad-3 badge" :class="bgs[e.result]"></b></td>
        </tr>
        </tbody>
      </table>
    </div>

    <div class="bl-b pl-3 ml-4 mt-3 mb-2 lh-13">未来赛事</div>
    <div class="bg-white py-2 pb-3">
      <div class="font-bold font-lg px-4 py-2" v-text="m.hostShort"></div>
      <table class="table-padded">
        <thead class="text-left bb-l">
        <tr class="text-grey">
          <th class="pl-4">联赛</th>
          <th class="text-right">主队</th>
          <th class="text-center"></th>
          <th>客队</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="e in m.hostFutureList">
          <td class="text-grey font-xs lh-15 pl-4">
            <div v-text="e.league"></div>
            <div v-text="e.matchDate"></div>
          </td>
          <td :class="color(e, 1)" class="text-right" v-text="e.host"></td>
          <td class="text-center">VS</td>
          <td :class="color(e)" v-text="e.guest"></td>
        </tr>
        </tbody>
      </table>

      <div class="font-bold font-lg px-4 py-2 mt-3" v-text="m.guestShort"></div>
      <table class="table-padded">
        <thead class="text-left bb-l">
        <tr class="text-grey">
          <th class="pl-4">联赛</th>
          <th class="text-right">主队</th>
          <th></th>
          <th>客队</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="e in m.guestFutureList">
          <td class="text-grey font-xs lh-15 pl-4">
            <div v-text="e.league"></div>
            <div v-text="e.matchDate"></div>
          </td>
          <td :class="color(e, 1)" class="text-right" v-text="e.host"></td>
          <td class="text-center">VS</td>
          <td :class="color(e)" v-text="e.guest"></td>
        </tr>
        </tbody>
      </table>
    </div>

  </div>
</template>

<script>
import { back } from '../router'
import http from '../http'

const colors = {
  3: 'text-red',
  1: 'text-green',
  0: 'text-blue'
}
const texts = {
  3: '胜',
  1: '平',
  0: '负'
}
const bgs = {
  3: 'bg-win',
  1: 'bg-even',
  0: 'bg-lose'
}

export default {
  name: 'match',
  data: () => ({
    texts,
    bgs,
    m: {
      engageData: {},
      guestData: {
        recent: {},
        total: {}
      },
      hostData: {
        recent: {},
        total: {}
      }
    }
  }),
  beforeRouteEnter (to, from, next) {
    http.post('/jingcai/match', to.query).then(detail => {
      next(vm => {
        vm.m = detail
      })
    }, err => {
      back()
    })
  },
  beforeRouteUpdate (to, from, next) {
    http.post('/jingcai/match', to.query).then(detail => {
      this.m = detail
      next()
    }, err => {
      back()
    })
  },
  methods: {
    color (e, host) {
      var key = e.result === undefined ? '3' : String(e.result)
      if (e.isHost) {
        if (host) {
          return colors[key]
        }
      } else {
        if (!host) {
          return colors[key]
        }
      }
    },
    tail (data) {
      if (data && data.total) {
        var {win, even, lose} = data.total
        return win + '/' + even + '/' + lose
      }
      return '-'
    },
    sum (data) {
      if (data && data.total) {
        var {win, even, lose} = data.total
        return win + even + lose
      }
      return '-'
    },
    back
  }
}
</script>

<style lang="scss">
  @import "../assets/css/theme";
  .bl-b { border-left: 3px solid #333 }
  .head {
    background: url(../assets/img/team_bg.jpg) center no-repeat;
    background-size: cover;
  }
  .app {
    .head {
      padding-top: 2rem;
    }
  }
  .badge { padding: .15rem .3rem }
</style>
